<template>
	<view>
		<navView :isBack="true" titleColor="#fff" navTitle="报告" backgroundColor="#008efe"></navView>
		<view class="textarea">
			<view class="title">
				报告类型
			</view>
			<uni-data-select style="width: 100%;"  :localdata="dayList"
				@change="change"></uni-data-select>
		</view>
		<view class="textarea">
			<view class="title">
				完成了哪些工作
			</view>
			<textarea v-model="formData.other_43472" placeholder="请输入" maxlength="100"
				@input="trackCharacterCount"></textarea>
			<view class="character-count">{{ characterCount }}/100</view>
		</view>
		<view class="textarea">
			<view class="title">
				取得了哪些成绩
			</view>
			<textarea v-model="formData.other_48871" placeholder="请输入" maxlength="100"
				@input="trackCharacterCount"></textarea>
			<view class="character-count">{{ characterCount }}/100</view>
		</view>
		<view class="textarea">
			<view class="title">
				当前进展如何
			</view>
			<textarea v-model="formData.other_33048" placeholder="请输入" maxlength="100"
				@input="trackCharacterCount"></textarea>
			<view class="character-count">{{ characterCount }}/100</view>
		</view>
		<view class="textarea">
			<view class="title">
				计划实施情况
			</view>
			<textarea v-model="formData.other_82389" placeholder="请输入" maxlength="100"
				@input="trackCharacterCount"></textarea>
			<view class="character-count">{{ characterCount }}/100</view>
		</view>
		<view style="height:150rpx;"></view>
		<button class="btn" @tap="add">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				characterCount: 0,
				dayList: [{
						value: 0,
						text: "月度"
					},
					{
						value: 1,
						text: "周报"
					}, {
						value: 2,
						text: "月报"
					}, {
						value: 3,
						text: "季报"
					}, {
						value: 4,
						text: "年报"
					}
				],
				formData:{
					type: '',
					other_43472: "",
					other_48871: "",
					other_33048: "",
					other_82389: "",
				}
			}
		},
		methods: {
			// 跟踪基本信息输入的字数
			trackCharacterCount(e) {
				this.characterCount = e.detail.value.length;
			},
			add() {				
				this.$request('/addons/qingdong/daily/createDaily', 'POST', this.formData).then(res => {
					if(res.code == 1){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
				})
			},
			change(e) {
				console.log(e)
				this.formData.type = this.dayList[e].text
			}
		}
	}
</script>

<style lang="scss">
	.textarea {
		width: 100%;
		position: relative;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 25rpx;
			margin-bottom: 15rpx;
		}

		textarea {
			width: 100%;
			height: 263rpx;
			background: #FBFBFB;
			padding: 15rpx;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 26rpx;
		}

		.character-count {
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
		}
	}

	.btn {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #1890ff;
		color: white;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translate(-50%);
	}
</style>